<template>
  <div
    ref="previewContent"
    style="width: 100%;height: 100%;background: transparent;display: flex;justify-content: center;"
  >
    <div :style="mainStyle" class="pre_view" id="pre_view" style>
      <span
        :style="printTimeStyle"
        v-if="baseData[0].showPrintTime"
      >打印时间：{{ baseData[0].printTime }}</span>
      <div class="logo" :style="logoStyle" v-if="baseData[2].logo.selected">
        <img :style="{ 'width': '100%', 'height': '100%' }" :src="baseData[2].logo.url" />
      </div>
      <div
        v-if="['针式打印三联', '三等分', 's3'].includes(baseData[1].typeValue)"
        :style="{ 'display': 'flex', 'text-align': 'center', 'margin-top': this.scale * 10 + 'px', 'align-items': 'center' }"
      >
        <div :style="titleStyle">{{ baseData[2].titleStyle.content }}</div>
        <div :style="subTitleStyle">{{ baseData[2].subTitleStyle.content }}</div>
      </div>
      <div v-else :style="{ 'text-align': 'center', 'margin-top': this.scale * 20 + 'px', }">
        <div :style="titleStyle">{{ baseData[2].titleStyle.content }}</div>
        <div :style="subTitleStyle">{{ baseData[2].subTitleStyle.content }}</div>
      </div>

      <div :style="billHeadStyle">
        <div :style="billHeadLeftStyle">
          <div>
            <div>
              <span
                :style="{ 'margin-right': scale * 20 + 'px' }"
                v-if="getDomShow(4, 'xghCompanyId_dictText')"
              >
                {{
                baseData[4].columnData.xghCompanyId_dictText.name
                + '：' + (baseData[4].otherData.xghCompanyId_dictText == undefined ? '' : baseData[4].otherData.xghCompanyId_dictText) }}
              </span>
              <span
                :style="{ 'margin-right': scale * 20 + 'px' }"
                v-if="getDomShow(4, 'xghExpressId_dictText')"
              >
                {{
                baseData[4].columnData.xghExpressId_dictText.name
                + '：' + baseData[4].otherData.xghExpressId_dictText }}
              </span>
              <span v-if="getDomShow(4, 'settlementTypeId_dictText')">
                {{
                baseData[4].columnData.settlementTypeId_dictText.name + '：' +
                baseData[4].otherData.settlementTypeId_dictText }}
              </span>
              <span v-if="getDomShow(4, 'bankId_dictText')">
                {{
                baseData[4].columnData.bankId_dictText.name + '：' +
                baseData[4].otherData.bankId_dictText }}
              </span>
              <span v-if="getDomShow(4, 'outBankId_dictText')">
                {{
                baseData[4].columnData.outBankId_dictText.name + '：' +
                baseData[4].otherData.outBankId_dictText }}
              </span>
            </div>
            <div v-if="getDomShow(4, 'remark')">
              {{ baseData[4].columnData.remark.name + '：' +
              baseData[4].otherData.remark }}
            </div>
          </div>
        </div>
        <div :style="billHeadRightStyle">
          <div :style="billHeadRightContentStyle">
            <span style="margin-left: 10px;" v-if="getDomShow(4, 'orderNumber')">
              单据编号：{{
              baseData[4].otherData.orderNumber }}
            </span>
            <span style="margin-left: 10px;" v-if="getDomShow(4, 'collectionTime')">
              {{
              baseData[4].columnData.collectionTime.name + '：' + baseData[4].otherData.collectionTime }}
            </span>
            <span style="margin-left: 10px;" v-if="getDomShow(4, 'payTime')">
              {{
              baseData[4].columnData.payTime.name + '：' + baseData[4].otherData.payTime }}
            </span>
            <span style="margin-left: 10px;" v-if="getDomShow(4, 'transferDate')">
              {{
              baseData[4].columnData.transferDate.name + '：' + baseData[4].otherData.transferDate }}
            </span>
          </div>
        </div>
      </div>
      <div class="bill_body" id="bill_body" :style="billBodyStyle" v-if="['收款结算单','付款结算单','物流代收结算单','物流代付结算单','物流运费结算单'].includes(baseData[0].type)">
        <div class="bill_mask_view_script"></div>
        <el-table
          style="border-left: 1px solid black;"
          :data="getTopTableData()"
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
          :span-method="arraySpanMethod"
          :show-header="false"
        >
          <template v-for="(item, index) in baseData[5].topColumnData">
            {{ item.props }}
            <el-table-column
              v-if="item.morenState"
              :label="item.morenName"
              :prop="item.props"
              :width="getTopWidth(index)"
            >
            <template slot-scope="scope">
              <div style="border-right: 1px solid black;padding: 3px;min-height:30px;"
                :style="scope.row.idx == '结销明细' ? 'border-bottom: unset;' : 'border-bottom: 1px solid black;'"
                :class="scope.row.idx == '序号' ? 'headStyle' : ''"
              >
                {{ scope.row[item.props] || '' }}
              </div>
            </template>
          </el-table-column>
          </template>
        </el-table>
        <!-- <span>hahah</span> -->
        <el-table
          style="border-left: 1px solid black;"
          :header-cell-style="headerCellStyleByBottom"
          :cell-style="cellStyleByBottom"
          :data="baseData[5].tableData"
          v-if="baseData[5].tableData.length > 0"
        >
          <template v-for="(item, index) in baseData[5].columnData">
            <el-table-column
              v-if="item.morenState"
              :label="item.morenName"
              :prop="item.props"
              :width="item.width * scale"
            >
            
          </el-table-column>
          </template>
        </el-table>
      </div>


      <div class="bill_body" id="bill_body" :style="billBodyStyle" v-if="['一般费用单','其他收入单','转账单'].includes(baseData[0].type)">
        <div class="bill_mask_view_script"></div>
        <el-table
          style="border-left: 1px solid black;"
          :header-cell-style="headerCellStyleByBottom"
          :cell-style="cellStyleByBottom"
          :data="baseData[5].tableData"
          v-if="baseData[5].tableData.length > 0"
        >
          <template v-for="(item, index) in baseData[5].columnData">
            <el-table-column
              v-if="item.morenState"
              :label="item.morenName"
              :prop="item.props"
              :width="Math.ceil(item.width * scale)"
              :key="index"
            >
          </el-table-column>
          </template>
          <div
              slot="append"
              style="display: flex;"
              class="append"
              v-if="this.baseData[5].columnData.length > 0"
            >
            <div v-if="baseData[0].type" :style="tableFootStyleByabs">
              <span style="margin-right: 20px">合计</span>
              共{{ baseData[5].tableData.length }}条明细
            </div>
            <template v-for="(item, sumIndex) in baseData[5].columnData">
              <div
                v-if="item.morenState"
                class="append-item"
                :style="{
                  width: Math.ceil(item.width * scale) + 'px',
                  height: parseInt(scale * baseData[3].footHeight),
                  background: '#ededed'
                }"
              >
                <div style="text-align: left; padding-right: -1px" :style="tableFootStyle">
                  {{ getshowValue(item, sumIndex) }}
                </div>
              </div>
            </template>
          </div>
        </el-table>
      </div>

      <div class="bill_foot" :style="billFootStyle">
        <div :style="billFootTopStyle">
          <span
            v-if="getDomShow(6, 'sysUserId_dictText')"
          >经手人：{{ baseData[6].otherData.sysUserId_dictText }}</span>
          <span
            v-if="getDomShow(6, 'verifyId_dictText')"
          >审核人：{{ baseData[6].otherData.verifyId_dictText }}</span>
          <span
            v-if="getDomShow(6, 'auditId_dictText')"
          >审核人：{{ baseData[6].otherData.auditId_dictText }}</span>
          <span v-if="getDomShow(6, 'createName')">制单人：{{ baseData[6].otherData.createName }}</span>
          <span v-if="getDomShow(6, 'createUserName')">制单人：{{ baseData[6].otherData.createUserName }}</span>
          <span
            v-if="getDomShow(6, 'createOrderDate')"
          >制单日期：{{ baseData[6].otherData.createOrderDate }}</span>
        </div>
        <div :style="bottomStyle">
          <div
            v-for="item in  baseData[7].qrList"
            :key="item.id"
            style="display: flex;align-items: center;"
          >
            <template v-if="item.selected">
              <span :style="{ 'font-size': scale * 10 + 'px', 'margin': '0 5px' }">{{ item.title }}</span>
              <div :style="qrImgStyle">
                <img :style="{ 'width': '100%', 'height': '100%' }" :src="item.url" />
              </div>
            </template>
          </div>
        </div>
      </div>
      <span :style="technicalSupportStyle">象过河软件技术支持</span>
    </div>
  </div>
</template>
<script>
import { delcommafy } from '@/utils/index'
export default {
  props: {
    baseData: Array,
    tipsData: Object,
  },
  data () {
    return {
      dialogVisible: false,
      text: '',
      isUpdate: false,
      tableData: [],
      codeList: [],
      finishStatus: false,
      inputFocus: false,
      domReady: false,
      scale: 1, //比例
      printTime: '',
      widthTop: 0,
    }
  },
  created () {
  },
  mounted () {
    let that = this
    this.$nextTick(() => {
      that.domReady = true
    })
  },
  activated () {
    // let preView = document.getElementById('pre_view')
    // console.log(preView);
  },
  computed: {
    mainStyle () {
      console.log(this.baseData[5].topTableData);
      if (this.domReady) {
        let padding = this.baseData[1].padding
        let item = this.baseData[1]

        let size = this.getPageSize()
        let w = size.w
        let h = size.h
        console.log(JSON.stringify(size));

        let availableWidth = (this.$refs.previewContent && this.$refs.previewContent.offsetWidth) ? this.$refs.previewContent.offsetWidth - 20 : w

        let width = Math.min(w, availableWidth)
        let height = h
        this.scale = width / w

        this.widthTop = width - this.scale * padding.left - this.scale * padding.right
        console.log('widthTop:', this.widthTop);
        // console.log('比例：', this.scale);

        let print = this.baseData[0].print
        let style = {
          'width': width + 'px',
          'padding-top': this.scale * padding.top + 'px',
          'padding-bottom': this.scale * padding.bottom + 'px',
          'padding-left': this.scale * padding.left + 'px',
          'padding-right': this.scale * padding.right + 'px',
          backgroundColor: '#fff',
          position: 'relative',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          // boxShadow: 'rgb(153,153,153) 0px 0px 10px'
        }
        return style
      }
      return ''
    },
    // logo
    logoStyle () {
      let is3 = ['针式打印三联', '三等分', 's3'].includes(this.baseData[1].typeValue)
      return {
        'position': 'absolute',
        'top': is3 ? this.scale * 15 + 'px' : this.scale * 35 + 'px',
        'left': is3 ? this.scale * 35 + 'px' : this.scale * 67 + 'px',
        'z-index': 1,
        'width': is3 ? this.scale * 90 + 'px' : this.scale * 120 + 'px',
        'height': is3 ? this.scale * 30 + 'px' : this.scale * 40 + 'px',
      }
    },
    // 主标题
    titleStyle () {
      let item = this.baseData[2].titleStyle
      return {
        'font-size': this.scale * item.size + 'px',
        'font-weight': item.bold ? '600' : '400',
        'text-decoration': item.underline ? 'underline' : 'none',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    // 副标题
    subTitleStyle () {
      let item = this.baseData[2].subTitleStyle
      return {
        'font-size': this.scale * item.size + 'px',
        'font-weight': item.bold ? '600' : '400',
        'text-decoration': item.underline ? 'underline' : 'none',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadStyle () {
      return {
        fontSize: 12 + 'px',
        marign: '10px 0 1px',
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        position: 'relative',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadLeftStyle () {
      return {
        fontSize: 12 + 'px',
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'flex-end',
        color: '#666666',
        lineHeight: this.scale * 16 + 'px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadRightStyle () {
      return {
        fontSize: 12 + 'px',
        position: 'absolute',
        right: '0',
        bottom: '0',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadRightContentStyle () {
      let is3 = ['针式打印三联', '三等分', 's3'].includes(this.baseData[1].typeValue)
      if (is3) {
        return {
          display: 'flex',
          flexDirection: 'column-reverse',
          height: this.scale * 40 + 'px',
          flexWrap: 'wrap-reverse',
          justifyContent: 'flex-start',
          color: '#000000',
          'font-family': 'Microsoft YaHei !important',
        }
      } else {
        return {
          display: 'flex',
          whiteSpace: 'nowrap',
          flexDirection: 'column-reverse',
          alignItems: 'flex-start',
          color: '#000000',
          'font-family': 'Microsoft YaHei !important',
        }
      }
    },
    billBodyStyle () {
      console.log(this.widthTop / 6 * 6);
      return {
        width: '100%',
        overflow: 'hidden',
        overflowX: 'clip',
        margin: '5px 0',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
        padding: '5px 8px',
      }
    },
    headStyle () {
      return {
        borderTop: '1px solid black',
      }
    },
    headerCellStyle () {
      let size = this.baseData[2].tableHead.size
      let h = this.scale * this.baseData[3].headHeight
      let height = Math.max(20, h)
      return {
        boxSizing: 'border-box',
        textAlign: 'center',
        // height: height + 'px',
        borderTop: '1px solid black',
        borderRight: '1px solid black',
        borderBottom: '1px solid black',
        fontWeight: this.baseData[2].tableHead.bold ? '600' : '400',
        fontSize: this.scale * size + 'px',
        minHeight: '20px',
        color: '#000000',
        padding: '3px 1px',
        background: 'transparent',
      }
    },
    headerCellStyleByBottom () {
      let size = this.baseData[2].tableHead.size
      let h = this.scale * this.baseData[3].headHeight
      let height = Math.max(20, h)
      return {
        // boxSizing: 'border-box',
        textAlign: 'center',
        // height: height + 'px',
        borderTop: '1px solid black',
        borderRight: '1px solid black',
        borderBottom: '1px solid black',
        fontWeight: this.baseData[2].tableHead.bold ? '600' : '400',
        fontSize: this.scale * size + 'px',
        minHeight: '20px',
        color: '#000000',
        padding: '3px 1px',
        background: 'unset !important',
      }
    },
    cellStyle () {
      let h = this.scale * this.baseData[3].rowHeight
      let height = Math.max(20, h)
      let size = this.baseData[2].tableBody.size
      return {
        // borderRight: '1px solid black',
        // borderBottom: '1px solid black',
        textAlign: 'left',
        // height: height + 'px',
        fontWeight: this.baseData[2].tableBody.bold ? '600' : '400',
        fontSize: this.scale * size + 'px',
        minHeight: '20px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
        // padding: '3px 1px',
        background: 'transparent',
      }
    },
    cellStyleByBottom () {
      let h = this.scale * this.baseData[3].rowHeight
      let height = Math.max(20, h)
      let size = this.baseData[2].tableBody.size
      return {
        borderRight: '1px solid black',
        borderBottom: '1px solid black',
        // borderTop: '1px solid black',
        textAlign: 'left',
        // height: height + 'px',
        fontWeight: this.baseData[2].tableBody.bold ? '600' : '400',
        fontSize: this.scale * size + 'px',
        minHeight: '20px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
        padding: '3px 1px',
        background: 'transparent',
      }
    },
    billFootStyle () {
      return {
        fontSize: 12 + 'px',
        marign: '10px 0 5px',
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billFootLeftStyle () {
      return {
        fontSize: 12 + 'px',
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        flexDirection: 'column',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billFootTopStyle () {
      return {
        fontSize: 12 + 'px',
        display: 'flex',
        justifyContent: 'space-between',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billFootRightStyle () {
      return {
        display: 'flex',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
        // whiteSpace: 'nowrap',
        // textAlign: 'right'
      }
    },
    qrImgStyle () {
      return {
        'width': this.scale * 60 + 'px',
        'height': this.scale * 60 + 'px',
      }
    },
    // 技术支持
    technicalSupportStyle () {
      return {
        'font-size': this.scale * 10 + 'px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
        alignSelf: 'flex-start',
      }
    },
    printTimeStyle () {
      let padding = this.baseData[1].padding
      return {
        'font-size': this.scale * 8 + 'px',
        'position': 'absolute',
        'top': this.scale * (padding.top + 12) + 'px',
        'right': this.scale * 22 + 'px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    bottomStyle () {
      let padding = this.baseData[1].padding
      return {
        marginTop: this.scale * 10 + 'px',
        display: 'flex',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    tableFootStyleByabs(item) {
      let h = parseInt(this.scale * this.baseData[3].footHeight)
      let height = Math.max(20, h)
      // console.log(item);
      return {
        height: height + 'px',
        fontSize: 12 + 'px',
        fontWeight: this.baseData[2].tableBody.bold ? '600' : '400',
        lineHeight: height + 'px',
        minHeight: '20px',
        padding: '0 10px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
        boxSizing: 'border-box',
        textAlign: 'right',
        position: 'absolute',
        left: '0px',
        width: 'max-content',
        zIndex: '10',
      }
    },
    tableFootStyle() {
      let h = parseInt(this.scale * this.baseData[3].footHeight)
      let size = this.baseData[2].tableBody.size
      let height = Math.max(20, h)
      return {
        // height: height + 'px',
        fontWeight: this.baseData[2].tableBody.bold ? '600' : '400',
        fontSize: this.scale * size + 'px',
        // lineHeight: height + 'px',
        padding: '2px 3px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
  },
  methods: {
    getPageSize () {
      let max = 1123
      let min = 794
      let value = this.baseData[1].typeValue
      switch (value) {
        case 's1':
          return {
            w: min,
            h: max - 20
          }
          break;
        case 's2': case '二等分': case '针式打印二联': case 'A5':
          return {
            w: min,
            h: max / 2 - 20
          }
          break;
        case 's3':
          return {
            w: min,
            h: max / 3 - 20
          }
          break;
        case 'h1': case 'A4':
          return {
            w: max,
            h: min - 20
          }
          break;
        case 'h2':
          return {
            w: max,
            h: min / 2 - 20
          }
          break;

        default:
          break;
      }
    },
    getTopTableData(){
      let list = JSON.parse(JSON.stringify(this.baseData[5].topTableData))
      console.log(list);
      list.unshift({
          idx: '序号',
          bankName: '账户名称',
          price: '金额',
          remark: '备注',
      })
      if (this.baseData[5].tableData.length > 0) {
        let isHave = false
        for (let index = 0; index < list.length; index++) {
          const element = list[index];
          if (element.idx == '结销明细') {
            isHave = true
          }
        }
        if (!isHave) {
          list.push({
            idx: '结销明细',
          })
        }
      }
      return list
    },
    getTopWidth (index) {
      let list = this.baseData[5].topColumnData
      let length = list.length
      let sw = this.widthTop - 16
      if (index == length - 1) {
        let sum = 0
        for (let i = 0; i < length - 1; i++) {
          let w = Math.floor(i % 2 == 0 ? (sw / 6) : (sw / 6) * 2)
          sum += w
        }
        return sw - sum - 1
      } else {
        let width = Math.floor(index % 2 == 0 ? (sw / 6) : (sw / 6) * 2)
        return width
      }
    },
    // 合计列
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {

      if (row.idx === '结销明细') {
        if (columnIndex === 0) {
          return [1, 4]
        }
      }
    },
    getDomShow (index, key) {
      let item = this.baseData[index]
      if (item && item.columnData && item.columnData.hasOwnProperty(key)) {
        return item.columnData[key].selected
      } else {
        return false
      }
    },
    getshowValue(item, index, parted = false) {
      let back = ''
      let moneyArr = ['price', 'inPrice']
      let numberArr = []
      if (moneyArr.includes(item.props) || numberArr.includes(item.props)) {
        let list = this.baseData[5].tableData
        let result = 0.0
        for (let i = 0; i < list.length; i++) {
          const element = list[i]
          let num = delcommafy(element[item.props])
          result += num
        }
        if (moneyArr.includes(item.props)) {
          if (item.props == 'grossProfitMargin') {
            console.log(1111,result);
            back = this.$formatMoney(result)  + '%'
          }else{
            back = this.$formatMoney(result)
          }
        } else {
          back = this.$formatNumber(result)
        }
      }
      return back
    },
  },
}
</script>

<style lang="scss" scoped media="print">
@media print {
  /* 确保边框正常显示 */
  .el-table thead{
    background: transparent !important;
  }
  .el-table th {
    background: unset !important;
  }
  .el-table::before {
    height: 0px !important;
  }
  .el-table td.el-table__cell {
    border-bottom: unset;
  }
  .el-tabel--mini .el-tabel__cell{
    border :1px solid red !important;
  }
  .headStyle{
    border-top :1px solid black;
  }
  .el-table tr{
    background-color: transparent!important;
  }
  .el-table::before {
    background: transparent !important;
  }
  .el-table::after {
    background: transparent !important;
  }
}
.append .append-item:last-child{
  border-right: 1px solid black !important;
}
.append .append-item{
  border-bottom: 1px solid black !important;
}
.headStyle{
  border-top :1px solid black;
  text-align: center;
  font-weight: 600;
}
.el-tabel--mini .el-tabel__cell{
    border :1px solid red !important;
  }
::v-deep .el-table td.el-table__cell {
    border-bottom: unset;
  }
.el-table::before {
  height: 0px !important;
}

.pre_view {
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  color: #000000;
}

.bottom_view {
  position: absolute;
  // bottom: 0;
  // width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.qr_item {
  display: flex;
  align-items: center;
}

.bill_head {
  margin: 10px 0 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: nowrap;
  }
}

.bill_foot {
  margin: 10px 0 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .right {
    display: flex;
    white-space: nowrap;
  }
}

.bill_body {
  width: 100%;
  overflow: hidden;
  overflow-x: clip;
  position: relative;
}

::v-deep .el-table {
  // border: 1px solid red;
  // border-right: unset;
  box-sizing: border-box;

  th,
  td {
    padding: 0;
    box-sizing: border-box;
    // border-right: 1px solid black;

    .cell {
      // display: flex;
      // align-items: center;
      // padding: 2px 3px;
      // line-height: 16px;
      // white-space: nowrap;
      width: 100%;
      height: 100%;
      padding: 0;
    }
  }

  th {
    .cell {
      justify-content: center;
    }
  }

  ::-webkit-scrollbar {
    display: none;
  }
}

.bill_mask_view_script {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
}
</style>
